Add legal docs, article system, and i18n infrastructure#33
Open
juthing wants to merge 54 commits into
Open
Conversation
Introduit un nouveau système de gestion du contenu en remplacement
des pages statiques. Aucun impact sur l'apparence visuelle du site.
Nouveau système :
- /content/articles/{id}/ : article avec meta.json, fr.md, en.md, assets/
- /content/authors/{discord-id}.json : profil auteur (fetch Discord API si "DISCORD")
- /content/labels/{id}.json : labels/catégories
Nouvelles URLs :
- /articles/{id}/ avec redirect depuis /{id}/
- /collections/{id}/ avec redirect depuis /{id}/
- /authors/{id}/ avec redirect depuis /{id}/
Internationalisation :
- Détection automatique de la langue (navigator.language + localStorage)
- Switcher FR/EN dans la top app bar
- apply-lang.ts inliné dans <head> pour éviter le flash
https://claude.ai/code/session_015nQmfMhLpMNmMhE7a9bBWi
Files generated by scripts/copy-docs.mjs from /docs/ source markdown. https://claude.ai/code/session_015nQmfMhLpMNmMhE7a9bBWi
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Suppression de l'ancien pipeline copy-docs et migration de toutes les pages existantes (about/, legal/) vers /content/articles/. Pages migrées : - quick-start → /articles/quick-start/ (label: about) - terms-of-service → /articles/terms-of-service/ (label: legal) - privacy-policy → /articles/privacy-policy/ (label: legal) - license → /articles/license/ (label: legal) Nouveaux labels avec nav_order : about (1), legal (2), change-logs (3) Nav mis à jour pour lire les articles groupés par label, même rendu visuel qu'avant (sections "À propos" / "Légal"). Redirects depuis les anciennes URLs : - /about/quick-start/ → /articles/quick-start/ - /legal/tos/ → /articles/terms-of-service/ - /legal/privacy/ → /articles/privacy-policy/ - /legal/license/ → /articles/license/ https://claude.ai/code/session_015nQmfMhLpMNmMhE7a9bBWi
Les éléments visuels (boutons FR/EN, article.css global) sont supprimés du layout principal. Le design reste identique à l'original. Le mécanisme de détection de langue (apply-lang.js) reste en place en fond, sans impact visuel. https://claude.ai/code/session_015nQmfMhLpMNmMhE7a9bBWi
…es pages Le template article utilise maintenant le même rendu que docs.html : - Même CSS (md-layout.css, syntax-highlight.css) - Même rendu markdown (renderMarkdown filter avec les mêmes plugins) - Même TOC - Aucun élément visuel nouveau (pas de labels, auteurs, chapeau, etc.) Nav alimentée par les labels (About, Legal) avec le même ordre et les mêmes noms de pages que l'ancien système. Pages migrées vers /content/articles/ : - introduction, quick-start, roadmap, support, bundle-sizes, markdown-test (about) - terms-of-service, privacy-policy, license (legal) Retiré apply-lang.js du layout global (pas de changement visuel). v1-changelog masqué (seo_level 3) — contenu exemple, absent de l'ancien site. https://claude.ai/code/session_015nQmfMhLpMNmMhE7a9bBWi
…or block - Add full-width responsive banner (landscape on desktop, portrait on mobile) with configurable gradient backgrounds and focus point for image banners - Structure article header: banner → title → date|chapeau → author → content with consistent 30px spacing between sections - Add author display with 42px avatar, name (bold), and role - Add banner_gradient and banner_focus fields to all article meta.json - Create two placeholder authors for demo purposes - Assign authors to all articles for complete demonstration https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Strip nav-drawer, top-app-bar, and md-list sidebar from default layout - Render main content directly without navigation wrapper - Add simple debug list of article links on the homepage - Remove TOC block from article template (was feeding the sidebar) https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
Keep top-app-bar (logo, theme, GitHub link) and content pane styling (rounded corners, background) but remove the md-list nav items. Force drawer width to 0 so no empty sidebar space is reserved. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Re-enable has-toc + toc slot in default layout and article template - Force symmetric left margin via --_pane-margin-inline-start to match the right margin, since the sidebar no longer provides left spacing https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…vicon - Hide first h1 from markdown body (duplicate of article-title) - Make article-title slightly larger (2.5rem) - Reduce spacing between title/dateline/author (30px → 10-20px) - Bold the date, format it client-side with locale (1 janvier 2026) - Center banner with equal margin top+sides from container pane - Banner border-radius = container radius - margin distance - Replace logo SVG and favicon with new Moddy geometric logo - Favicon uses the accent color (#6750a4) https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Restore max-width: 1200px and margin: 0 auto on title/dateline/author/body - Restore banner width: 100% with no side margins - Only reduce vertical margins between elements (30px → 10-20px) - Add 12px gap in top-app-bar between logo and title text https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Banner uses negative margins to extend closer to pane edge (12px inset), border-radius = container_radius - inset = 28 - 12 = 16px - Favicon SVG generated dynamically from --md-sys-color-primary - Favicon updates automatically on theme-changed event https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Banner: use negative inline/top margins to extend closer to pane edge, border-radius = container_radius(28) - inset(12) = 16px - Logo SVG: remove width/height attributes so CSS 32x32 controls sizing - Article body: add block display rules for children (display: block, max-width, margin-inline: auto) matching md-layout.css patterns to prevent horizontal layout of content elements https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…rowser)
Root cause of horizontal content: md-layout.css has `div:has(> table)
{ display: flex }` to center table-wrapper divs. Since .article-body is a
div directly containing a table, it matched and laid all content out in a
row. Fixed by setting .article-body { display: block }.
Banner: .article-page now spans full pane content width (max-width: none
overrides md-layout's 980px cap) so the banner can be centered with an
equal 12px margin on top/left/right. Radius follows r = container(28) -
margin(12) = 16px. Text content stays capped at 1200px and centered.
Verified with a headless browser: content stacks vertically, banner has
equal margins with 16px radius, logo renders at 32x32, favicon is a
theme-colored data URL.
https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…rator
Verified each fix in a real headless browser:
- Banner square corner: .article-page inherited `overflow-x: auto` from
md-layout.css, clipping the banner's negative-margin corner into a square.
Set .article-page { overflow: visible } so the 16px radius shows.
- Logo size: size the logo in `em` (1em) so it matches the height of the
"Moddy Docs" wordmark next to it instead of a fixed 32px.
- Logo/text gap reduced from 12px to 8px.
- Mobile: always show the logo and hide the hamburger menu button (the nav
drawer it toggled no longer has content).
- Date script showing as text: it was `main > script`, which md-layout's
`main > * { display: block }` made visible. Moved it inside .article-page
so the UA `script { display: none }` applies; date still formats.
- Added a light separator with a small margin under the article author.
https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Desktop banner: the pane reserves 8px of right padding for the scrollbar, so the right gap was only 4px vs 12px on the left. Compensate the right negative margin (-8px) so all three gaps are an equal 12px (verified). - Mobile banner: portrait 3/4 crop now applies, and the banner full-bleeds to the pane edges (no left/right gap, matching the right side). The pane's rounded top corners clip the banner so the top stays rounded. - Increased vertical spacing between title / dateline / author. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
The --_pane-margin-inline-start override was applying on all screen sizes, causing an asymmetric left margin on mobile. Now wrapped in a min-width:1501px media query so the nav-drawer's internal responsive rules handle mobile/tablet. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
The pane start-margin override only applied above 1501px, leaving the 600-1500px range with the component's default 28px left margin against a 16px right margin. Apply the override for all widths above 600px so left and right margins are symmetric on every non-mobile screen. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Callouts: md-layout's `main > blockquote` rules never matched the nested `.article-body` blockquotes, so they lost their box. Reproduce the original rounded colored-box + icon design scoped to `.article-body`. - Bump body text and main title sizes slightly; italicize the chapeau. - TOC: tuck the pane off the right edge (thin handle) and slide it in as an overlay on hover/focus so the content pane spans the full width. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Callouts: mirror md-layout's `main > blockquote` rules verbatim (scoped to `.article-body`) instead of a custom approximation, so nested article blockquotes render identically to the doc pages. - TOC: replace the off-screen translateX (which overflowed the viewport and caused a horizontal scrollbar) with a clip-path reveal anchored flush to the right edge. The handle strip stays part of the panel in both states, so the cursor never leaves it at the trigger edge — no more open/close flicker. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Callouts: cap at min(100%, 980px) and center (margin-inline: auto), matching main's `main > :not(...)` rule, so they render as contained boxes instead of full-width bars. (Box/icon styling already mirrored main verbatim.) - TOC: slide-in (translateX) reveal flush to the right edge — no flicker, no side overflow (document clips overflow-x). Adds a one-time load hint: after a 2s pause the panel glides out ~6mm, lingers, then eases back in. - Text selection now uses the active theme's primary color via ::selection. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
Remove clip-path from TOC panel so its drop shadow can cast over the header and footer instead of being cut off at the content boundaries. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
Increase the banner's top/left/right margin and decouple the corner radius to make it very rounded (36px). https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
When scrolled to top, the content pane's top corners use an expanded radius (r_ext = r_banner + margin = 92px) to concentrically match the banner. As the user scrolls down, the radius smoothly animates back to the normal 28px over 100px of scroll travel. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…adius On mobile (≤768px): banner uses 455/520 portrait aspect ratio, 16px margin, 28px border-radius. The content pane's top corners follow the same concentric system (r_ext = 28 + 16 = 44px at scroll top, animating back to 28px on scroll). https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…rgins - Change pane overflow from auto to clip so the scrollbar respects the rounded corners. - On mobile, override --_pad-right to equal --_pad (no scrollbar compensation) so the banner has identical margins on all three sides. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…icle template - Create author profile for Jules (id: 1164597199594852395, Fondateur) with avatar and avatar_decoration fetched from api.moddy.app - Set all 10 articles to use Jules as author - Add avatar decoration overlay in article template, positioned above the avatar with proper sizing https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Avatar decoration: add overflow visible on wrappers, enlarge decoration area (inset -16px on author page, -8px on article page) so Discord decorations aren't cropped - Scrollbar: reduce width to 6px, change color from primary to subtle semi-transparent on-surface (25% opacity) https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…ners, fix avatar circle - Revert scrollbar to primary color and 8px width - Remove border-radius: inherit from scroll-wrapper so the pane's overflow: clip properly clips the scrollbar at rounded corners - Add aspect-ratio: 1 and display: block on avatar images to guarantee a perfect circle https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
- Replace border with box-shadow on avatar (border was distorting the image inside border-radius: 50%) - Force square dimensions with min-width/min-height/aspect-ratio - Center decoration with transform translate(-50%,-50%) and 120% size with object-fit: contain so it's never cropped https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…radius The pane itself is now the scroll container (overflow: hidden auto). Its scrollbar natively clips at its border-radius, so it no longer extends above the rounded corners. Scrollbar styling selectors updated from .scroll-wrapper to .pane. Sidebar aside keeps its own scroll on scroll-wrapper since it has overflow: hidden. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
The <p> inside blockquotes without a .content wrapper kept its default browser margins, creating extra space top/bottom. Now first/last child margin reset also targets direct children of the blockquote itself. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
Same style as the author block separator — 1px solid outline-variant, adapts to theme color automatically. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
… on desktop - Article author link: only underline the name on hover, not the role - Article avatar: 42px → 48px, gap 18px → 10px - Article decoration: 120% → 150% for more breathing room - Author page avatar: 96px → 100px, decoration 140% → 160% - Scrollbar: add margin-block on webkit scrollbar track so it stays inside the rounded corners on desktop https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
…p corner - Decoration back to 120% (Discord standard tight frame); object-fit: contain already prevents cropping, so no need to enlarge it - Scrollbar track margin-top now uses --expanded-top-radius (92px desktop / 52px mobile) instead of a flat 28px, so the thumb clears the large rounded top corner on desktop too https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
… deco straw clipping, role underline on hover
Scrollbar: the pane was its own scroll container, and a scroll
container's scrollbar is NOT clipped by its own border-radius. Now the
pane uses overflow: hidden (rounded clip) and the inner .scroll-wrapper
scrolls — its scrollbar IS clipped by the parent's rounded overflow,
which works with overlay scrollbars too. Removed the ineffective
webkit track-margin hack.
Avatar/decoration: enlarge the avatar (author 100→108px, article
48→52px) and lower the decoration ratio (120%→111%) so the decoration
keeps the same absolute size while the avatar fills more of it.
Decoration straw clipping: .author-page inherited md-layout's
`main > * { overflow-x: auto }`, which clipped the decoration
overflowing upward. Added overflow: visible.
Role underline: the global `a:hover { text-decoration: underline }`
underlined the whole author link (name + role). Force the link
undecorated on hover and underline only the name.
https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
Author avatar 108→100px, article 52→48px; decoration ratio bumped to 120% to keep the same absolute decoration size while shrinking the pp. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
… img md-layout.css applies border-radius: 22px to every img, which rounded the decoration image's corners and clipped the straw sticking out. Reset border-radius, min-height and overflow on the decoration images. https://claude.ai/code/session_01FouJdARrn1MTP6BcG3SAoP
Redesign article page layout with banner, author block, and improved styling
* Scope nav-drawer expanded radius to article pages only The --expanded-top-radius rule was in article.css (shared with author/label pages), causing the pane top corners to be over-rounded on those pages. Moved it to an inline <style> in article.njk so only article pages get the large 92px radius that matches the banner; author and label pages now use the default catalog-shape-xl (28px) like the homepage. https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ * Replace separate logo icon + text with combined wordmark SVG Merge the standalone icon (.logo-link) and the "Moddy Docs" text link (#home-link) into a single <a> element containing the new combined wordmark SVG. The SVG uses currentColor so it follows the active theme primary color. Logo height stays 1em (matching the previous font size), width scales automatically from the 1470×253 viewBox aspect ratio. https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ * Fix wordmark size and horizontal position in top app bar Increase SVG height from 1em to 1.7em so the text glyphs render at the same visual size as the previous "Moddy Docs" text (the viewBox has ~147/253 units of effective cap height, requiring a 1.7× correction). Add 6px start margin to nudge the wordmark slightly to the right. https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ * Reduce wordmark height to 1.2em https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ * Bump wordmark height to 1.35em https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ * Update wordmark to new SVG version https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ * Update wordmark to final SVG version https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ --------- Co-authored-by: Claude <noreply@anthropic.com>
) - Update moddy-logo.ts viewBox to 1422×253 with correct paths - Replace debug list on homepage with responsive article card grid (banner, labels, title, chapeau, date) https://claude.ai/code/session_01TvYDn6CmmbAhEw5BtZMGiZ Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a comprehensive content management system for the Moddy documentation site, including legal documents (Terms of Service, Privacy Policy, License), a multi-language article/blog system with authors and labels, and internationalization (i18n) infrastructure.
Key Changes
Legal Documentation
site/site/legal/tos.md) — comprehensive ToS covering service description, usage terms, premium subscriptions, intellectual property, and moderation policiessite/site/legal/license.md) — custom open-source license with attribution and non-commercial use conditionsContent Management System
/content/directory structure for articles, authors, and labels_data/articles.js,_data/authors.js,_data/labels.js) to load and process content at build time"DISCORD"placeholderArticle & Collection Pages
site/articles/article.njk— article detail page template with metadata, author info, labels, and markdown renderingsite/collections/collection.njk— label/collection page showing all articles with that labelsite/authors/author.njk— author profile page with bio, links, and authored articlesredirect-articles.njk,redirect-labels.njk,redirect-authors.njk) for short URLs (e.g.,/{article-id}/→/articles/{article-id}/)Internationalization (i18n)
_data/i18n.jswith UI strings for French (default) and Englishsrc/inline/apply-lang.ts— inline script to detect and apply saved language preference before first paint (prevents content flash)css/article.csswith[data-lang-content]attribute support for conditional renderingStyling
css/article.css(377 lines) — comprehensive styles for article pages, author profiles, collection pages, language switcher, and article cardsDocumentation & Configuration
CLAUDE.md— detailed project architecture and content structure documentationdocs/architecture.mdandsite/site/about/architecture.md— system architecture documentationsite/site/about/markdown-test.md— comprehensive markdown syntax test fileeleventy.config.cjsto watch/content/directory for changesvercel.jsonwith permanent redirects for trailing slashespackage.jsonto include content directory in watch targetsLayout & Infrastructure
site/_includes/default.htmlto include language detection script and article stylessite/site/about/about.jsonandsite/site/legal/legal.json— directory-level configuration for docs layout and table of contentsNotable Implementation Details
seo_levelin metadatanavigator.languagewith localStorage fallback; defaults to French/content/articles/{id}/assets/and served at/articles/{id}/assets/https://claude.ai/code/session_015nQmfMhLpMNmMhE7a9bBWi